<script setup>
import { Modal ,message } from 'ant-design-vue';
import { onMounted, ref, reactive, markRaw} from 'vue';
import { annouce, editannouce, getNewslist, deletenews } from '@/common/http.api.js'
import { formatDateTime } from '@/utils/formattime.js'
import { confirmDelete } from '@/utils/modalcomfir.js'
import tlTable from '@/components/Table/tlTable.vue'
import Content from './content.vue'
import Push from './pushnews.vue'

const latepush = ref('')
const pushUser = ref('')
const content = ref('')

// 公告部分
const getAnnouce = async () => {
  const res = await annouce()
  latepush.value = formatDateTime(res.data.createTime)
  pushUser.value = res.data.name
  content.value = res.data.content
}

const editAnnouce = async () => {
  let data = {
    admID: sessionStorage.getItem('admID'),
    content: content.value
  }
  const res = await editannouce(data)
  if (res.code === 0) message.success('发布成功')
  getAnnouce()
}

onMounted(() => {
  getAnnouce()
})

// 资讯部分

//资讯内容
const rowData = reactive({ data: {} });

const showContent = (row) => {
  rowData.data = row
  currentComponent.comName = componentList[1].comName;
};

// 删除资讯

const deleteNews = (row) => {
  let data = row
  confirmDelete('删除资讯', '确定要删除此条资讯吗',async (data) => {
    let newsID = row.newsID
    await deletenews({ newsID })
    message.success('删除成功')
    isRefrensh.value++
  })

}

const currentComponent = reactive({});

const handleShowPush = () => {
  currentComponent.comName = componentList[0].comName;
}

//动态组件
const componentList = reactive([
  {
    name: "Push",
    comName: markRaw(Push),
  },
  {
    name: "Content",
    comName: markRaw(Content),
  },
]); //组件可以有多个

const closeModal = (mark) => {
  currentComponent.comName = null; // 清空
  if (mark > 0) isRefrensh.value++; // 刷新表格
}

// 表格
const isRefrensh = ref(0);
const pageData = reactive({ page: 1, limit: 5 });
const searchData = ref([
  {
    label: "发布人:",
    prop: "create_name",
    type: "input-complete",
    options: [],
    value: "",
  },
  {
    label: "标题:",
    prop: "title",
    type: "input-complete",
    options: [],
    value: "",
  },
  {
    type: "clear-btn",
  },
  {
    type: "search-btn",
  },
]);

const columns = ref([
  {
    title: "序号",
    width: "10%",
    customRender: (v) => {
      return <div>{`${v.index + 1}`}</div>;
    },
  },
  {
    title: "标题",
    width: "20%",
    dataIndex: "title",
    key: "title",
  },
  {
    title: "发布人",
    dataIndex: "create_name",
    key: "create_name",
    align: "center",
  },
  {
    title: "发布时间",
    dataIndex: "createTime",
    key: "createTime",
    align: "center",
    renderDom: (h, row) => <div>{formatDateTime(row.createTime)}</div>
  },
  {
    title: "操作",
    align: "center",
    renderDom: (h, row) => {
      return (
        <>
          <a-button
            type="link"
            size="small"
            onClick={() => {
              showContent(row)
            }}
          >
            详情
          </a-button>
          <a-button
            type="link"
            size="small"
            onClick={() => {
              deleteNews(row)
            }}
          >
            删除
          </a-button>
        </>
      );
    },
  },
]);

</script>


<template>
  <div>
    <div class="title-g">社区公告</div>
    <div class="card-g">
      <div style="margin-bottom: 10px;">最新发布：{{ latepush }} - {{ pushUser }} </div>
      <a-textarea :rows="4" v-model:value="content" placeholder="编辑公告" :maxlength="300" />
      <div class="btn"><a-button type="primary" @click="editAnnouce">发布</a-button></div>
    </div>
    <div class="title-g" style="margin-top: 20px;">社区资讯</div>

    <div><tl-table :columns="columns" :pageData="pageData" :searchData="searchData" :isRefrensh="isRefrensh"
        :renderTable="getNewslist">
        <template v-slot:title>资讯列表</template>
        <template v-slot:oprate>
          <a-button type="primary" @click="handleShowPush">发布</a-button>
        </template>
      </tl-table>
    </div>
    <component :row="rowData" :is="currentComponent.comName" @on-close="closeModal"></component>
  </div>
</template>



<style lang="less" scoped>
.btn {
  display: flex;
  margin-top: 10px;
  justify-content: flex-end;
}
</style>